.d-flex {
  display: flex;
  flex-wrap: wrap;
}
.df-f1 {
  //   @extend .d-flex;
  flex: 1;
}
.df-jc-c {
  @extend .d-flex;
  justify-content: center;
}
.df-jc-sa {
  @extend .d-flex;
  justify-content: space-around;
}
.df-jc-sb {
  @extend .d-flex;
  justify-content: space-between;
}
.df-c {
  @extend .d-flex;
  flex-direction: column;
}
.df-c-reverse {
  @extend .d-flex;
  flex-direction: column-reverse;
}

.df-r-reverse {
  @extend .d-flex;
  flex-direction: row-reverse;
}
